<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>荷芯联盟</title>
		<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />

		<link rel="stylesheet" href="css/alliance.css" />
		<link href="css/hehua.css" rel="stylesheet" />
	<link rel="stylesheet" type="text/css" href="css/allianceAlert/alert.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/adapter.js"></script>
		<script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		<script src="//res.qiaomukeji.com/js/chomoo-weixin.js?v=3"></script>
		<script type="text/javascript" src="js/moduls/islogin.js"></script>
		<script src="js/moduls/alliance.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/distpicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>

	<body>
		<div class="top">
			<div class="top-logo">
			</div>
			<div class="top-theme">
			</div>
			<div class="top-title">
			</div>

			<div class="top-btnBack" onclick="history.go(-1);">
			</div>
		</div>
		<div class="bottom">
			<div class="bottom-logo">
			</div>
		</div>

		<div class="right_items">
			<div class="item rules">活动规则</div>
			<div class="item rank">排行榜</div>
		</div>

		<div class="content" style="opacity: 0;">

			<div class="middlePath" style="    margin-top: 2.8rem;">
				<div class="title">
					<img src="img/coreAlliance.png" alt="">
				</div>
				<div class="line">
					<img src="img/line.png" alt="">
				</div>
				<div class="midContent">
					<div class="location">

						<span>你所在的地方 :</span>
						<span id="currentSide"></span>
					</div>
					<div class="areaChose">
						<div class="distpicker" data-toggle="distpicker" data-autoselect="1" style="display: inline-block;">
							<select name="subProvince">
								<option value="" disabled selected="">市</option>
							</select>
						</div>
						<span class="areaSpa">地区筛选</span>
					</div>

				</div>
				<div class="hhtable">
					<div class="hhtable-content">
						<div class="hhtable-header">
							<table>
								<thead>
									<tr>
										<td class="active" style="width:20%;background-color: #ab1b23;">联盟名称</td>
										<td style="width:20%;background-color: #41997d;">创建日期</td>
										<td style="width:20%;background-color: #41997d;">人数</td>
										<td style="width:20%;background-color: #41997d;">荣誉值</td>
										<td style="width:20%;background-color: #41997d;">区域</td>
									</tr>
								</thead>

							</table>
						</div>
						<div class="hhtable-body">
							<table>
								<tbody>
									<tr v-for="(teamInfo,index) in teamInfos" :key="index" @click="toAlliance(teamInfo.id)">
										<td style="width:20%">
											<div>{{teamInfo.name}}</div>
										</td>
										<td style="width:20%;line-height: 0.2rem;vertical-align: middle;">{{teamInfo.date}}</td>
										<td style="width:20%">{{teamInfo.peopleNum}}</td>
										<td style="width:20%">{{teamInfo.honor}}</td>
										<td style="width:20%">{{teamInfo.address}}</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>

				<!--<div class="page">
                <span>页码</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
            </div>-->

				<div class="line">
					<img src="img/line.png" alt="">

				</div>
				<!--<div class="createA">我要创建联盟</div>-->

				<div class="btn btn-middle  createA">我要创建联盟</div>

				<!--<div class="bottom-logo">
        <img src="img/bottom_logo2.png" />
    </div>-->
			</div>
		</div>
		<!--活动规则弹窗-->
		<div class="alertBox ruleAlert">

			<div class="innerAlert rule-div">
				<div class="close"><img src="img/closeBox.png" /></div>

				<div class="alertTitle ruleTitle">活动规则</div>
				<div class="alertTxt ruleTxt">
					<p>本环节为联盟PK模式，根据联盟荣誉值决定胜负，个人可获得荷花数。 <br/>用户自发邀请好友组成联盟，发起人既是队长，队长所在区域即为该联盟区域。
					</p>
					<h4>如何获得荣誉值、荷花数？</h4>
					<p>①邀请成员，每成功加入一人增加2朵荷花2个荣誉值，每天最多可邀请10人。<br /> ②首次加入联盟，每人奖励10朵荷花。
						<br /> ③扫描荷花系列及钻石系列全部带二维码的产品，扫码验真成功可额外获得5朵荷花5个荣誉值。
						</br>
						④每天持续进入活动，增加2朵荷花2个荣誉值；连续进入5天，额外增加5朵荷花5个荣誉值；连续进入10天，额外增加10朵荷花10个荣誉值；中断即从第一天计算。</br>
						⑤用户知识答题PK，用户选择非联盟成员进行答题PK，获胜用户增加3朵荷花3个荣誉值。
					</p>
					<h4>知识答题PK规则：</h4>
					<p>
						在规定时间内进行答题，答对加2分，答错扣1分，分数高用户获胜。<br /> 每个用户可选择1对1或1对多进行PK，每次同时最多选择10人PK，每天最多和100人PK。若发起邀请后无人应战，24点后PK自动失效。
						</br>
						本环节设置道具，每局道具最多使用5次。
					</p>

					<h4>本活动分为三个阶段：</h4>
					<p>
						1月6日—9日，省区PK赛，每个省区前十晋级，联盟每个用户获得10朵荷花，整个联盟获得300荣誉值，队长额外获得50朵荷花数。
					</p>
					<p>1月10日-13日，大区挑战赛，每个大区前十晋级，联盟每个用户获得10朵荷花，整个联盟获得500荣誉值，队长额外获得80朵荷花数。按照每个联盟荷花数高低获得单包品吸、车载支架各5个。</p>
					<p>1月14日-15日，全国挑战赛，荣誉值前3名联盟获胜，联盟每个用户获得100朵荷花，队长额外获得200朵荷花。此外，按照每个联盟荷花数高低获得荷花两包装品吸礼盒、人体入户感应灯，第一名联盟30个，第二名联盟20个，第三名联盟10个。</p>

					<div class="knowed">我知道了</div>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			var app = new Vue({
				el: '.content',
				data: {
					teamInfos: []
				},
				methods: {
					toAlliance(id) {
						console.log(id);
						location.href = "joinAlliance.html?teamId=" + id;
					}
				}
			})
			//筛选地理位置
			$.get('https://restapi.amap.com/v3/ip?key=4f8794682030dea431e12c4256e705f5', function(res) {
				console.log(res);
				var t_province = res["province"];
				$("#currentSide").html(t_province)
				document.getElementsByName("subProvince")[0].value = 'a';

				$(".areaChose").change(function() {
					//要触发的事件
					var options = $(".areaChose option:selected"); //获取选中的项
					console.log(options.val())
					$("#currentSide").html(options.val())
					$(".areaSpa").hide();
					getAddress()
				});

				$(".areaSpa").click(function() {
					$(".distpicker select").click()
				})
				getAddress()
			})

			function getAddress() {
				var t_address = $("#currentSide").html();
				console.log(t_address)
				//获取联盟
				getTeamInfo(t_address, function(_res) {
//					for(var i = 0; i < _res.team.length % 5; i++) {
//						var t_team = {
//							"honor": "",
//							"address": ""
//						}
//						_res.team.push(t_team)
//					}
					app.teamInfos = _res.team;
					
					$(".content").css("opacity",1);
				})
			}
		</script>
		<script src="js/alliance.js" type="text/javascript" charset="utf-8"></script>

	</body>

</html>